import { type Component, computed, defineComponent, h, ref } from "vue";
import highlightjs from "markdown-it-highlightjs";
import markdownit from "markdown-it";

const Markdown: Component = defineComponent({
  props: {
    source: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const md = ref<markdownit>(markdownit({ html: true }));

    md.value.use(highlightjs, {
      inline: true,
      auto: true,
      ignoreIllegals: true
    });

    // var code = `${props.source}`;
    // if (code.indexOf("<think>") !== -1) {
    //   if (code.indexOf("</think>") !== -1) {
    //     code = code
    //       .replace("\n</think>", "</think>")
    //       .replace("</think>", "\n</think>");
    //   } else {
    //     code = code + "\n</think>";
    //   }
    // }

    const content = computed(() => {
      var code = `${props.source}`;
      if (code.indexOf("<think>") !== -1) {
        if (code.indexOf("</think>") !== -1) {
          code = code
            .replace("\n</think>", "</think>")
            .replace("</think>", "\n</think>");
        } else {
          code = code + "\n</think>";
        }
      }
      return md.value.render(code);
    });

    return () => h("div", { innerHTML: content.value });
  }
});

export default Markdown;
